<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts/map/js/china";
import axios from "axios";

export default {
  components: {},
  data() {
    return {
      center: { lng: 116.418261, lat: 39.921984 },
      zoom: 5,
      echarts: [],
      markers: [],
      show: false,
      maker: null,
      BMap: null,
      map: null,
    };
  },
  mounted() {
    var ROOT_PATH =
      "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    // myChart.showLoading();
    // axios.get(ROOT_PATH + "/data/asset/geo/USA.json", function (usaJson) {
    // myChart.hideLoading();
    // echarts.registerMap("USA", usaJson, {
    //   Alaska: {
    //     left: -131,
    //     top: 25,
    //     width: 15,
    //   },
    //   Hawaii: {
    //     left: -110,
    //     top: 28,
    //     width: 5,
    //   },
    //   "Puerto Rico": {
    //     left: -76,
    //     top: 26,
    //     width: 2,
    //   },
    // });

    option = {
      title: {
        text: "USA Population Estimates (2012)",
        subtext: "Data from www.census.gov",
        sublink: "http://www.census.gov/popest/data/datasets.html",
        left: "right",
      },
      tooltip: {
        trigger: "item",
        showDelay: 0,
        transitionDuration: 0.2,
      },
      visualMap: {
        left: "right",
        min: 500000,
        max: 38000000,
        inRange: {
          color: [
            "#313695",
            "#4575b4",
            "#74add1",
            "#abd9e9",
            "#e0f3f8",
            "#ffffbf",
            "#fee090",
            "#fdae61",
            "#f46d43",
            "#d73027",
            "#a50026",
          ],
        },
        text: ["High", "Low"],
        calculable: true,
      },
      toolbox: {
        show: true,
        //orient: 'vertical',
        left: "left",
        top: "top",
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {},
        },
      },
      series: [
        {
          name: "USA PopEstimates",
          type: "map",
          roam: true,
          map: "USA",
          emphasis: {
            label: {
              show: true,
            },
          },
          data: [
            { name: "Alabama", value: 4822023 },
            { name: "Alaska", value: 731449 },
            { name: "Arizona", value: 6553255 },
            { name: "Arkansas", value: 2949131 },
            { name: "California", value: 38041430 },
            { name: "Colorado", value: 5187582 },
            { name: "Connecticut", value: 3590347 },
            { name: "Delaware", value: 917092 },
            { name: "District of Columbia", value: 632323 },
            { name: "Florida", value: 19317568 },
            { name: "Georgia", value: 9919945 },
            { name: "Hawaii", value: 1392313 },
            { name: "Idaho", value: 1595728 },
            { name: "Illinois", value: 12875255 },
            { name: "Indiana", value: 6537334 },
            { name: "Iowa", value: 3074186 },
            { name: "Kansas", value: 2885905 },
            { name: "Kentucky", value: 4380415 },
            { name: "Louisiana", value: 4601893 },
            { name: "Maine", value: 1329192 },
            { name: "Maryland", value: 5884563 },
            { name: "Massachusetts", value: 6646144 },
            { name: "Michigan", value: 9883360 },
            { name: "Minnesota", value: 5379139 },
            { name: "Mississippi", value: 2984926 },
            { name: "Missouri", value: 6021988 },
            { name: "Montana", value: 1005141 },
            { name: "Nebraska", value: 1855525 },
            { name: "Nevada", value: 2758931 },
            { name: "New Hampshire", value: 1320718 },
            { name: "New Jersey", value: 8864590 },
            { name: "New Mexico", value: 2085538 },
            { name: "New York", value: 19570261 },
            { name: "North Carolina", value: 9752073 },
            { name: "North Dakota", value: 699628 },
            { name: "Ohio", value: 11544225 },
            { name: "Oklahoma", value: 3814820 },
            { name: "Oregon", value: 3899353 },
            { name: "Pennsylvania", value: 12763536 },
            { name: "Rhode Island", value: 1050292 },
            { name: "South Carolina", value: 4723723 },
            { name: "South Dakota", value: 833354 },
            { name: "Tennessee", value: 6456243 },
            { name: "Texas", value: 26059203 },
            { name: "Utah", value: 2855287 },
            { name: "Vermont", value: 626011 },
            { name: "Virginia", value: 8185867 },
            { name: "Washington", value: 6897012 },
            { name: "West Virginia", value: 1855413 },
            { name: "Wisconsin", value: 5726398 },
            { name: "Wyoming", value: 576412 },
            { name: "Puerto Rico", value: 3667084 },
          ],
        },
      ],
    };
    myChart.setOption(option);

    option && myChart.setOption(option);
  },

  methods: {
    getData(echarts) {
      this.echarts = [];
      if (echarts) {
        this.echarts = echarts;
      }

      if (this.echarts.length > 0) {
        this.echarts.forEach((e) => {
          if (e.lng != undefined && e.lat != undefined) {
            this.markers.push({
              lng: e.lng,
              lat: e.lat,
              area: e.area,
              value: e.value,
              unit: e.unit,
            });
          }
        });
      }
    },
    handler({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
    },
    async look(item) {
      this.maker = item;
      await this.infoWindowOpen();
    },
    infoWindowClose() {
      this.show = false;
    },
    infoWindowOpen() {
      this.show = true;
    },
  },
};
</script>

<style scoped>
.echarts {
  background-color: #ffffff;
  margin-top: 2vh;
  border-radius: 7px;
  padding-bottom: 1vh;
}
</style>
